<script>
export default {
  name: "myinfo",
  data() {
    return {
      form: {
        num: 10
      },
      categoryList: [],
      category: {
        label: ''
      },
      show: false,
      userInfo: null
    }
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.getCategoryList()
  },
  computed: {
    defaultValueIndex() {
      const findIndex = this.categoryList.findIndex(item => item.value === this.category.value)
      if (findIndex > -1) {
        return findIndex
      }
      return 0
    }
  },
  methods: {
    openShow() {
      this.show = true
    },
    confirmSelect(e) {
      this.category = e[0]
    },
    getCategoryList() {
      this.$api.categoryList().then(res => {
        this.categoryList = res.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
        if (res.length > 0) {
          this.category = res[0]
        }
      })
    },
    submit() {
      this.$api.createUserPracticeRecord({
        category_id: this.category.value,
        num: this.form.num,
        user_id: this.userInfo.id
      }).then(res => {
        uni.navigateTo({
          url: `/pages/question/create/create?id=${res.id}`
        })
      })
    }
  }
}
</script>

<template>
  <div class="myinfo">
    <div class="form-box">
      <u-form :model="form" ref="uForm" label-width="100px">
        <u-form-item label="课程分类"><div  @click="openShow">{{ category.label || '请选择'}}</div></u-form-item>
        <u-form-item label="题目数量"><u-input v-model="form.num" /></u-form-item>
      </u-form>
    </div>
    <div class="primary-button" @click="submit" >开始练习</div>
    <u-select v-model="show" :list="categoryList" :defaultValue="[defaultValueIndex]" @confirm="confirmSelect"></u-select>

  </div>
</template>

<style lang="scss">
.myinfo {
  height: 100%;
  background-color: #F5F7FA;
  padding: 20rpx;
  .primary-button {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    line-height: 41px;
    font-size: 16px;
    color: #fff;
    background-color: rgb(61, 155, 246);
    border-radius: 5px;
    box-sizing: border-box;
  }
  .form-box {
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 20rpx;
  }
}
</style>
